<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <el-container class="home-container">
      <el-header>
        <div>欢迎使用校园点餐系统</div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/ShouYe">首页</el-menu-item>
          <el-menu-item index="/Search">菜品搜索</el-menu-item>
          <el-menu-item index="/DingDan">订单信息</el-menu-item>
          <el-menu-item index="/Hot">商家推荐</el-menu-item>
          <el-menu-item index="/Colloge">我的收藏</el-menu-item>
          <el-menu-item index="/User">个人信息</el-menu-item>
        </el-menu>
        <el-button type="danger" @click="OutUp">退出</el-button>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      // head部分
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
  methods: {
    // head部分
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出登录
    OutUp() {
      console.log(222);
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
h1 {
  color: #fff;
}
.container {
  height: 100%;
}
.home-container {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
}

.header img {
  width: 180px;
}
.el-aside {
  background-color: rgb(73 183 152);
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  height: 100%;
  background-color: #eaedf1;
}
.el-container.is-vertical {
  height: 100%;
  flex-direction: column;
}
.toggle-button {
  background: linear-gradient(
    60deg,
    rgb(207, 197, 182) 0%,
    rgb(83, 196, 8) 100%
  );
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
